<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 为图片预览区域设置样式 */
        .preview {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }

        body {
            display: flex;
        }

        /* 为小图片设置样式 */
        .preview img {
            width: 200px;
            height: 200px;
        }

        /* 图片显示区域 */
        .big_show {
            width: 400px;
            height: 400px;
            border: 1px solid blue;
            /* 盒子外面的部分不可见 */
            overflow: hidden;
            /* 绝对定位，距离页面左边300像素 */
            position: absolute;
            left: 300px;
            /* 将其隐藏 */
            display: none;
        }

        /* 为大图片设置样式 */
        .big_show img {
            position: absolute;
            width: 800px;
            height: 800px;
        }

        /* 为遮罩层设置样式 */
        .mask {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            /* rgba最后一个参数为透明度 */
            background-color: rgba(255, 0, 0, 0.2);
            /* 先将其隐藏起来 */
            display: none;
        }
    </style>
</head>

<body>
    <!-- 图片预览区域 -->
    <div class="preview">
        <!-- 小图 -->
        <img src="images/goods-detail/front-3.png">
        <!-- 遮罩层 -->
        <div class="mask"></div>
    </div>
    <!-- 图片放大区域 -->
    <div class="big_show">
        <!-- 大图 -->
        <img src="images/goods-detail/front-2.png">
    </div>
    <script>
        //1、获取页面中的元素
        let preview = document.querySelector(".preview");//获取预览区
        let mask = document.querySelector(".mask");//获取遮罩层
        let big_show = document.querySelector(".big_show");//获取显示区
        let big_img = big_show.querySelector("img");//获取大图片
        preview.onmousemove = function (e) {//当鼠标在预览区移动时
            mask.style.display = "block";//显示遮罩层
            big_show.style.display = "block";//显示图片显示区
            //鼠标在盒子中的横坐标=鼠标在页面中的横坐标-预览区在页面中的横坐标
            //然后鼠标在盒子中的横坐标需要赋值给遮罩层在预览区中的横坐标，这时鼠标的位置正好对应遮罩层最左边
            //为了让鼠标显示在遮罩层的中心，遮罩层在预览区中的横坐标需要再减去1/2遮罩层的宽度
            //遮罩层在预览区的横坐标=鼠标在页面中的坐标-预览区对页面坐标的偏移量-
            let x = e.pageX - preview.offsetLeft - mask.offsetWidth / 2;
            //纵坐标与横坐标原理相同
            let y = e.pageY - preview.offsetTop - mask.offsetHeight / 2;
            //获取遮罩层最大的移动距离，最大移动距离不超过图片预览区域
            //（这是一个固定的数字）水平最大移动距离=预览区的宽度-遮罩层的宽度
            let x_max = preview.offsetWidth - mask.offsetWidth;
            //（这时一个固定的数字）垂直最大移动距离=预览区的高度-遮罩层的高度
            let y_max = preview.offsetHeight - mask.offsetHeight;
            //根据最大移动距离限制遮罩层水平方向的移动范围
            if (x < 0) {//如果遮罩层在左侧要移出预览区
                x = 0;//让遮罩层的横坐标为0，无法出去
            } else if (x > x_max) {//如果遮罩层最右侧要移出预览区
                x = x_max;//遮罩层的横坐标恒为最大移动距离
            }
            //根据最大移动距离限制遮罩层垂直方向的移动范围
            if (y < 0) {//如果遮罩层在上方要移出预览区
                y = 0;//让遮罩层的纵坐标恒为0，无法移出
            } else if (y > y_max) {//如果遮罩层在下方要移出预览区
                y = y_max;//让遮罩层的纵坐标恒为最大值
            }
            //将计算好的遮罩层的坐标x和y赋值给遮罩层，让其跟随鼠标进行移动
            mask.style.left = x + "px";
            mask.style.top = y + "px";
            //遮罩层的坐标比整个预览区的宽度，得到两个比值，该比值是移动距离的比值
            let x_pro = x / preview.offsetWidth;
            let y_pro = y / preview.offsetHeight;
            //大图片的移动距离=移动距离的比值×大图片的宽高
            let x_big = x_pro * big_img.offsetWidth;
            let y_big = y_pro * big_img.offsetHeight;
            //由于图片显示区域是固定不变的，是大图片的位置在改变
            //当遮罩层在预览区向右移动一段距离，那么大图片在显示区必须向左移动一定比例的距离
            //这样才能显示在显示区域(big_show)中，因此为大图片的移动距离赋值时
            //需要将大图片的移动距离变成负值
            big_img.style.left = -x_big + "px";
            big_img.style.top = -y_big + "px";
        }
        //给预览区注册鼠标移开事件
        preview.onmouseleave = function () {
            mask.style.display = "none";//遮罩层隐藏
            big_show.style.display = "none";//图片显示区域隐藏
        }

    </script>
</body>

</html>